<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="config">配置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-divider content-position="left">基础参数</el-divider>
        <el-descriptions direction="vertical" :column="4" border size="small">
            <el-descriptions-item label="最多接受预定人数">
                {{ reserveRule.maxReserveNum }}位
            </el-descriptions-item>
            <el-descriptions-item label="最少提前多久可订">
                {{ reserveRule.minBeforeTime }}分钟
            </el-descriptions-item>
            <el-descriptions-item label="最长提前多久可订">
                {{ reserveRule.maxBeforeTime }}天
            </el-descriptions-item>
            <el-descriptions-item label="预定间隔时间">
                {{ reserveRule.minIntervalTime }}分钟
            </el-descriptions-item>
            <el-descriptions-item label="座位保留时间">
                {{ reserveRule.seatReserveTime }}分钟
            </el-descriptions-item>
            <el-descriptions-item label="可预定桌型">
                {{ reserveRule.tableTypes }}
            </el-descriptions-item>
            <el-descriptions-item label="是否开启预定">
                <el-switch
                    v-model="reserveRule.status"
                    @change="updateSwitch">
                </el-switch>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">预定时间段</el-divider>
        <el-descriptions direction="vertical" :column="4" border size="small">
            <el-descriptions-item label="早餐预定开关">
                <el-switch
                    v-model="reserveRule.breakfastRadio"
                    @change="updateSwitch">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="早餐预定时间段">
                {{ reserveRule.breakfastTime }}
            </el-descriptions-item>
            <el-descriptions-item label="午餐预定开关">
                <el-switch
                    v-model="reserveRule.lunchRadio"
                    @change="updateSwitch">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="午餐预定时间段">
                {{ reserveRule.lunchTime }}
            </el-descriptions-item>
            <el-descriptions-item label="晚餐预定开关">
                <el-switch
                    v-model="reserveRule.dinnerRadio"
                    @change="updateSwitch">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="晚餐预定时间段">
                {{ reserveRule.dinnerTime }}
            </el-descriptions-item>
            <el-descriptions-item label="不可预定时间段">
                {{ reserveRule.unavailablePeriod }}
            </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">操作时间</el-divider>
        <el-descriptions direction="vertical" :column="4" border size="small">
            <el-descriptions-item label="创建时间">
                {{ reserveRule.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="谁创建的">
                {{ reserveRule.createBy }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
                {{ reserveRule.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="谁更新的">
                {{ reserveRule.updateBy }}
            </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">订金配置</el-divider>
        <el-descriptions direction="vertical" :column="3" border size="small">
            <el-descriptions-item label="订金开关">
                <el-switch
                    v-model="reserveRule.depositRadio"
                    @change="updateSwitch">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="订金规则">
                {{ reserveRule.depositRule }}
            </el-descriptions-item>
            <el-descriptions-item label="订金">
                {{ reserveRule.deposit }}
            </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">通知配置</el-divider>
        <el-descriptions direction="vertical" :column="2" border size="small">
            <el-descriptions-item label="顶部的通知文本">
                {{ reserveRule.noticeText }}
            </el-descriptions-item>
            <el-descriptions-item label="点击通知文本菜单KEY">
                {{ reserveRule.noticeKey }}
            </el-descriptions-item>
        </el-descriptions>

        <el-drawer ref="drawer" direction="rtl" :title=addOrUpdateDialogTitle width="40%"
                   :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="160px" size="small">
                <el-divider content-position="left">基础参数</el-divider>
                <el-form-item label="是否开启预定">
                    <el-switch v-model="addOrUpdateForm.status"></el-switch>
                </el-form-item>
                <el-form-item label="最多接受预定人数">
                    <el-input v-model="addOrUpdateForm.maxReserveNum"
                              placeholder="最多接受预定人数"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="最少提前多久可订">
                    <el-input v-model="addOrUpdateForm.minBeforeTime"
                              placeholder="最少提前多久可订"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    <div class="form-tips">单位分钟</div>
                </el-form-item>
                <el-form-item label="最长提前多久可订">
                    <el-input v-model="addOrUpdateForm.maxBeforeTime"
                              placeholder="最长提前多久可订"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    <div class="form-tips">单位天数</div>
                </el-form-item>
                <el-form-item label="预定间隔时间">
                    <el-input v-model="addOrUpdateForm.minIntervalTime"
                              placeholder="预定间隔时间"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    <div class="form-tips">单位分钟</div>
                </el-form-item>
                <el-form-item label="座位保留时间">
                    <el-input v-model="addOrUpdateForm.seatReserveTime"
                              placeholder="座位保留时间"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    <div class="form-tips">单位分钟</div>
                </el-form-item>
                <el-form-item label="可预定桌型">
                    <el-input v-model="addOrUpdateForm.tableTypes" type="textarea"
                              placeholder="可预定桌型"></el-input>
                    <div class="form-tips">格式比如：大厅：1，包房：3，多个用逗号分隔，后面数字表示最少预定人数</div>
                </el-form-item>

                <el-divider content-position="left">预定时间段</el-divider>
                <el-form-item label="早餐预定开关">
                    <el-switch v-model="addOrUpdateForm.breakfastRadio"></el-switch>
                </el-form-item>
                <el-form-item label="早餐预定时间段">
                    <el-input v-model="addOrUpdateForm.breakfastTime"
                              placeholder="早餐预定时间段"></el-input>
                </el-form-item>
                <el-form-item label="午餐预定开关">
                    <el-switch v-model="addOrUpdateForm.lunchRadio"></el-switch>
                </el-form-item>
                <el-form-item label="午餐预定时间段">
                    <el-input v-model="addOrUpdateForm.lunchTime"
                              placeholder="午餐预定时间段"></el-input>
                </el-form-item>
                <el-form-item label="晚餐预定开关">
                    <el-switch v-model="addOrUpdateForm.dinnerRadio"></el-switch>
                </el-form-item>
                <el-form-item label="晚餐预定时间段">
                    <el-input v-model="addOrUpdateForm.dinnerTime"
                              placeholder="晚餐预定时间段"></el-input>
                </el-form-item>
                <el-form-item label="不可预定时间段">
                    <el-input v-model="addOrUpdateForm.unavailablePeriod" type="textarea"
                              placeholder="不可预定时间段">
                    </el-input>
                    <div class="form-tips">格式比如：2023/1/1-2023/1/10 17:00-21:00，2023/1/20-2023/1/21 10:00-22:00</div>
                </el-form-item>

                <el-divider content-position="left">订金配置</el-divider>
                <el-form-item label="订金开关">
                    <el-switch v-model="addOrUpdateForm.depositRadio"></el-switch>
                </el-form-item>
                <el-form-item label="订金规则" v-if="addOrUpdateForm.depositRadio">
                    <el-select v-model="condition.depositRule"
                               placeholder="订金规则">
                        <el-option label="按单收取" value="1"></el-option>
                        <el-option label="按人数收取" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订金" v-if="addOrUpdateForm.depositRadio">
                    <el-input v-model="addOrUpdateForm.deposit"
                              placeholder="订金"></el-input>
                </el-form-item>

                <el-divider content-position="left">通知配置</el-divider>
                <el-form-item label="顶部的通知文本">
                    <el-input v-model="addOrUpdateForm.noticeText" type="textarea"
                              placeholder="顶部的通知文本"></el-input>
                </el-form-item>
                <el-form-item label="点击通知文本菜单KEY">
                    <el-input v-model="addOrUpdateForm.noticeKey"
                              placeholder="点击通知文本菜单KEY"></el-input>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="addOrUpdateDialogVisible = false" size="small">取 消
                </el-button>
                <el-button class="drawer-footer-button" @click="addOrUpdateConfirm" type="primary" size="small">确 定
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {addReserveRule, deleteReserveRule, getReserveRuleByPage, updateReserveRule} from '@/api/api'

export default {
    name: "ReserveRule",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            // 预定规则
            reserveRule: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        size: {
            type: String,
            default: 'small'
        },
        shopId: String,
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatDepositRule: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "按单收取";
            } else if (cellValue == '2') {
                return "按人数收取";
            } else {
                return "未知";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "关闭预定";
            } else if (cellValue == '1') {
                return "开启预定";
            } else {
                return "未知";
            }
        },
        config: function () {
            if (this.reserveRule.id) {
                this.showUpdateDialog(this.reserveRule);
            } else {
                this.showAddDialog();
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            if (this.shopId) {
                this.addOrUpdateForm.shopId = this.shopId;
            }
            this.$set(this.addOrUpdateForm, "status", true)
            this.$set(this.addOrUpdateForm, "breakfastRadio", false)
            this.$set(this.addOrUpdateForm, "breakfastTime", '7:00-9:00')
            this.$set(this.addOrUpdateForm, "lunchRadio", true)
            this.$set(this.addOrUpdateForm, "lunchTime", '11:00-13:00')
            this.$set(this.addOrUpdateForm, "dinnerRadio", true)
            this.$set(this.addOrUpdateForm, "dinnerTime", '17:00-21:00')

            this.$set(this.addOrUpdateForm, "depositRadio", false)
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addReserveRule(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateReserveRule(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        updateSwitch: function () {
            if (this.reserveRule.id) {
                updateReserveRule(this.reserveRule).then(data => {
                    this.getData();
                });
            } else {
                // 第一次配置
                this.config();
            }
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteReserveRule({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            getReserveRuleByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                if (this.tableData.length > 0) {
                    this.reserveRule = this.tableData[0];
                }
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
